<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">

      项目名称<el-select v-model="searchData.projId.value"
                 placeholder="项目名称"
                 style="width: 120px; margin-right:30px; margin-left:10px">
        <el-option v-for="item in projectList"
                   :key="item.id"
                   :label="item.projName"
                   :value="item.id" />
      </el-select>

      <el-button type="primary"
                 @click="loadData()">查询</el-button>
      <el-button type="warning"
                 @click="clearnSearch()">重置</el-button>

      <el-button type="success"
                 @click="addDialog = true">添加</el-button>
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->

        <el-table-column prop="project.projName"
                         label="项目"
                         width="100" />
        <el-table-column prop="user.userName"
                         label="项目负责人"
                         width="100" />
        <el-table-column prop="description"
                         label="进度描述"
                         width="400" />
        <el-table-column prop="percentage"
                         label="百分比"
                         width="100" />

        <el-table-column prop="createTime"
                         label="创建时间"
                         width="250" />
        <!---------------------表单数据------------------------------->
        <el-table-column label="操作">
          <template #default="scope">

            <el-button size="small"
                       @click="openEdit(scope.row.id)">修改</el-button>
            <el-button size="small"
                       @click="deleted(scope.row.id)"
                       type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination style="margin-bottom: 20px"
                   background
                   layout="prev, pager, next"
                   :page-count="tableData.pages"
                   v-model:current-page="tableData.page"
                   @update:current-page="loadData" />
    <!--------------------------------组件------------------>

    <!------------------详情弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="detailDialog"
               title="详情"
               width="30%"
               :before-close="resetForm">
      <div>
        <div>
          项目id : {{ form.projId }}
        </div>
        <div>
          进度描述 : {{ form.description }}
        </div>
        <div>
          百分比 : {{ form.percentage }}
        </div>
        <div>
          上传user : {{ form.createUser }}
        </div>
        <div>
          创建时间 : {{ form.createTime }}
        </div>
      </div>
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="addDialog"
               title="新增"
               width="30%"
               :before-close="resetForm">
      <!--数据开始---->
      <el-form :model="form"
               label-width="120px">
        <el-form-item label="项目">
					<el-select v-model="form.projId"
										 placeholder="项目名称"
										 style="width: 120px; margin-right:30px; margin-left:10px">
						<el-option v-for="item in projectList"
											 :key="item.id"
											 :label="item.projName"
											 :value="item.id" />
					</el-select>

        </el-form-item>
        <el-form-item label="进度描述">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="百分比">
          <el-input v-model="form.percentage" />
        </el-form-item>
        <el-form-item label="上传用户">
					<el-select v-model="form.createUser" placeholder="用户"   style="width: 220px; margin-right:30px; margin-left:10px">
						<el-option
							v-for="item in userList"
							:key="item.id"
							:label="item.userName +'---'+item.departName +'---'+item.departRole"
							:value="item.id"
						/>
					</el-select>

        </el-form-item>

        <!--数据截止---->
        <el-form-item>
          <el-button type="primary"
                     @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="editDialog"
               title="编辑"
               width="30%"
               :before-close="resetForm">
      <!--数据开始---->


				<el-form :model="form"
								 label-width="120px">
					<el-form-item label="项目">
						<el-select v-model="form.projId"
											 placeholder="项目名称"
											 style="width: 120px; margin-right:30px; margin-left:10px">
							<el-option v-for="item in projectList"
												 :key="item.id"
												 :label="item.projName"
												 :value="item.id" />
						</el-select>

					</el-form-item>
					<el-form-item label="进度描述">
						<el-input v-model="form.description" />
					</el-form-item>
					<el-form-item label="百分比">
						<el-input v-model="form.percentage" />
					</el-form-item>
					<el-form-item label="上传用户">
						<el-select v-model="form.createUser" placeholder="用户"   style="width: 220px; margin-right:30px; margin-left:10px">
							<el-option
								v-for="item in userList"
								:key="item.id"
								:label="item.userName +'---'+item.departName +'---'+item.departRole"
								:value="item.id"
							/>
						</el-select>

					</el-form-item>

        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" disabled/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary"
                     @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getProgressPage,
  updateProgress,
  deletedProgress,
  addProgress,
  getProgressById
} from "@/api/progress";


import {
  getProjectPage,
  updateProject,
  getProjectList,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";

import { useUserStore } from "@/stores/userStores";
import {getTree} from "@/api/user";
const projectList = ref([]);
const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const form = ref({
	project: {},
	user: {},
  id: '', //项目进度表id
  projId: '', //项目id
  description: '', //进度描述
  percentage: '', //百分比
  createUser: '', //上传user
  createTime: '', //创建时间
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const isAdmin = ref(false);
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({
  //项目进度表id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目id
  projId: {
    key: 'proj_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //进度描述
  description: {
    key: 'description',
    sqlKeyword: 'EQ',
    value: ''
  },
  //百分比
  percentage: {
    key: 'percentage',
    sqlKeyword: 'EQ',
    value: ''
  },
  //上传user
  createUser: {
    key: 'createUser',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch () {
  searchData.value.id.value = '';
  searchData.value.projId.value = '';
  searchData.value.description.value = '';
  searchData.value.percentage.value = '';
  searchData.value.createUser.value = '';
  searchData.value.createTime.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  const res = await getProgressById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  detailDialog.value = true;
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getProgressById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateProgress(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
	form.value = {};
  const res = await addProgress(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedProgress({ id });
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  // form.value = {};
  // 图片处理
  imgList.value = [];
};
const userList = ref([]);
const loadData = async () => {
	const resd = await getTree();
	userList.value = resd.data;
  tableData.query = searchData.value;
  const res = await getProgressPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};

const loadlProjectList = async () => {
  const res = await getProjectList();
  projectList.value = res.data;
}
onMounted(() => {
  // 初始加载分页数据
  loadData(tableData);
  isAdmin.value = userStore.getIsAdmin();
  console.log("isAdmin{}", isAdmin.value)
  loadlProjectList();

});
</script>

<style scoped>
.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}
</style>

